<style scoped lang="scss">
  .assetTree{
    .ivu-tree-title {
      background-color: #d5e8fc;
    }
  }
</style>
<!--ivu-tree-title-->
<template>
  <Tree ref="tree" :data="compGroup.treeLayout" @on-select-change="select" @on-contextmenu="handleContextMenu">
    <template slot="contextMenu">
      <DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">{{$t(`compDesign.jProperty.delete`)}}</DropdownItem>
    </template>
  </Tree>
</template>

<script>
import {mapActions, mapState} from "vuex";
import storeVar from "../mixins/storeVar";

export default {
  name: "jAsset",
  mixins:[storeVar],
  data(){
    return {
      assetId:null
    }
  },
  props:{

  },
  computed: {},
  mounted() {},
  watch:{
    'compGroup.currentId':function(val,old) {
      if(val===this.assetId){
        return;
      }
        this.setTreeSelection(val);
    }
  },
  methods:{
    setTreeSelection(val){
      let flatState = this.$children[0].flatState;
      let nodes = flatState.map(obj => obj.node)
      let index = nodes.findIndex(item => item.id === val);
      if (index !== -1) {
        this.$children[0].handleSelect(nodes[index].nodeKey)
      }
    },
    select(all,item){
      if(item.id!==this.assetId){
        this.setElement(item.id);
        this.assetId=item.id;
      }
    },
    handleContextMenu(data, eventModel, position){
      this.itemData=data;
    },
    handleContextMenuDelete(){
      this.$emit('deleteAsset',this.itemData)
    }
  }
}
</script>

